<template>
	<view class="main">
		<view class="top flex">
			<view class="avatar">
				<image :src="form.avatar" mode="aspectFill"></image>
				<button class="btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar">点击获取头像</button>
			</view>
		</view>
		<view class="form">
			<view class="item">
				<view class="name">微信昵称</view>
				<input v-model="form.nickname" maxlength="20" type="nickname" placeholder="点击获取" @change="changeNickname" />
				<uni-icons type="right" color="#999"></uni-icons>
				<button open-type="nick"></button>
			</view>
			<view class="item">
				<view class="name">真实姓名</view>
				<input v-model="form1.realname" maxlength="20" type="text" placeholder="请输入" />
			</view>

			<view class="item">
				<view class="name">手机号</view>
				<input v-model="form1.mobile" type="tel" placeholder="请输入" />
			</view>
		</view>
		

		<view class="btn-wrap flex">
			<view class="btn" @click="confirmForm1">
				保存
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {},
				form: {
					avatar: '',
					nickname: '',
					warehouse_id: ''
				},
				form1: {
					realname: '',
					mobile: ''
				},
				store: '',
				storeList: []
			};
		},
		async onLoad() {
			await this.getWarehouseList()
			this.getUserInfo();	
		},
		methods: {
			async chooseAvatar(e) {
				const avatar = await this.$uploadFile([e.detail.avatarUrl]);
				console.log('avatar',avatar)
				this.form.avatar = avatar[0]
			},
			changeStore(e){
				const index = e.detail.value
				this.store = this.storeList[index].name
				this.form.warehouse_id = this.storeList[index].id
			},
			changeNickname(e){
				this.form.nickname = e.detail.value
			},
			getUserInfo() {
				this.$services.userLogin().then(res => {
					// this.form = this.mergeObjects(this.form, res.data)
					// this.form1 = this.mergeObjects(this.form1, res.data)
					
					this.form.avatar = res.data.avatar
					this.form.nickname = res.data.nickname
					this.form.warehouse_id = res.data.warehouse_id
					this.form1.realname = res.data.retailName
					this.form1.mobile = res.data.mobile
					
					this.store = this.storeList.find(item=>item.id == res.data.warehouse_id).name
				})
			},
			getWarehouseList() {
				this.$services.enterprise_store_list().then(res => {
					this.storeList = res.data
				})
			},

			confirmForm() {
				this.$services.update_member_info(this.form).then(res => {
					this.$toast(res.em || '修改成功！')
					this.$store.dispatch('userLogin')
				})
			},
			confirmForm1() {
				this.$services.save_member_info(this.form1).then(res => {
					// this.$toast(res.em || '修改成功！')
					this.confirmForm()
				})
			},
			// updateUserInfo() {
			// 	this.confirmForm()
			// 	this.confirmForm1()
			// },
			
			mergeObjects(obj1, obj2) {
				let mergedObj = {};     
				let keys = Object.keys(obj1);
				for (let key of keys) {  
			    if (key in obj2) {  
					mergedObj[key] = obj2[key];  
			    } else {  
					mergedObj[key] = obj1[key];  
			    }  
			  }  
			  return mergedObj;  
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background-color: #fff;

		.top {
			width: 750rpx;
			height: 365rpx;
			align-items: center;
			justify-content: center;
			background-size: 100% 100%;

			.avatar {
				position: relative;
				width: 160rpx;
				height: 215rpx;

				.btn {
					font-size: 24rpx;
					color: #f7b500;
					text-align: center;
					border: 0;
					background-color: #fff;
					margin: 20rpx 0 0;
					padding: 0;

					&::after {
						border: 0;
					}
				}

				image {
					width: 160rpx;
					height: 160rpx;
					background-color: #eee;
					border-radius: 50%;
				}

				.icon {
					position: absolute;
					right: 0rpx;
					bottom: -6rpx;
				}
			}
		}

		.form {
			background-color: #fff;

			.item {
				position: relative;
				display: flex;
				padding: 35rpx 0;
				margin: 0 50rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #f6f6f6;
				align-items: center;

				.name {
					width: 180rpx;
					color: #666;
				}

				input {
					font-size: 28rpx;
					flex: 1;
				}

				::v-deep .uni-icons {
					position: absolute;
					right: 0;
					bottom: 30rpx;
				}
			}
		}
	}

	.btn-wrap {
		position: fixed;
		bottom: 100rpx;
		left: 30rpx;

		.btn {
			width: 690rpx;
			height: 80rpx;
			color: #fff;
			background-color: #f7b500;
			text-align: center;
			line-height: 80rpx;
			border-radius: 10rpx;
		}
	}
</style>